<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>节目专栏</title>
    <link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="public/lib/layer/css/layui.css">
    <link rel="stylesheet" href="public/css/public.css">
    <link rel="stylesheet" href="public/css/video.css">
</head>

<body>
    <div class="header">
        <div class="nav-contact">
            <div class="row">
                <ul class="address"></ul>
                <div class="logo">
                	<a href="index.html">
                		<img src="public/images/sdk_logo.jpg" alt="">
                	</a>
                </div>
            </div>
        </div>
        <div class="row nav-menu">
            <div class="inline-block menu"></div>
            <div class="inline-block tool-side"></div>
        </div>
    </div>
    <div class="contact-body">
        <div class="content-body">
            <div class="video row">
                <div class="talk" id="J_content-explain">
                    <img src="public/images/content.png" alt="" />
                </div>
                <img src="public/images/videoimg.jpg" alt="" class="rightimg" />
            </div>
        </div>
        <div class="video-body row">
            <div class="live-new clearfix">
                <div class="video-title"></div>
                <div class="new-box video-box">
                    <div class="new-video">
                        <div id="J_news_video"></div>
                        <p class="live-txt"  id="J_news_text"></p>
                    </div>
                </div>
                <div class="right-list video-list">
                    <ul class="list clearfix" id="J_news"></ul>
                </div>
            </div>
            <div class="teacher-talk clearfix">
                <div class="video-title"></div>
                <div class="new-box video-box">
                    <div class="new-video">
                        <div id="J_live_video"></div>
                        <p class="live-txt" id="J_live_text"></p>
                    </div>
                </div>
                <div class="right-list video-list">
                    <ul class="list clearfix" id="J_live"></ul>
                </div>
            </div>
            <div class="live-new uncle clearfix">
                <div class="video-title"></div>
                <div class="new-box video-box">
                    <div class="new-video">
                        <div id="J_uncle_video"></div>
                        <p class="live-txt" id="J_uncle_text"></p>
                    </div>
                </div>
                <div class="right-list video-list">
                    <ul class="list clearfix" id="J_uncle"></ul>
                </div>
            </div>
            <!-- 预约教师 -->
            <div class="appointment"></div>
        </div>
    </div>
    <!-- 页脚 -->
    <div class="footer"></div>
    <script id="J_news_tpl" type="text/html">
        {{# d.list.forEach(function(val,index){ }} 
            <li class="{{# if(index == 0){ }}active-tab{{# };}}" title="{{val.title}}" data-content="{{val.content}}" data-url='{{val.videoUrl}}'>{{val.title}}</li>
        {{# }); }}
    </script>
    <script src="public/lib/layer/layui.all.js"></script>
    <script src="public/js/G.js"></script>
    <script src="public/js/user.js"></script>
    <script src="public/js/video.js"></script>
    <script src="public/js/public.js"></script>
    <script>
	contentGuideApi.getOne("节目专栏", function(data){
	    var html = "<img src='public/images/content.png' alt='' />";
	    for (var i = 0; i < data.length; i++) {
	        var value = data[i].value;
	        html += "<p>" + value + "</p>";
	    }
	    $("#J_content-explain").html(html);
	})
    var live = {
        pageSize: 20,
        categoryId: 1
    }
    var talk = {
        pageSize: 20,
        categoryId: 2
    }
    var uncle = {
        pageSize: 20,
        categoryId: 3
    }
    video.getList(live, function(data) {
        laytpl($('#J_news_tpl').html()).render(data, function(html) {
            $('#J_news').html(html)
        })
        console.log(data)
        $('#J_news_video').html(data.list[0].videoUrl)
        $("#J_news_text").text(data.list[0].content)
        $('.video-title').eq(0).html(data.list[0].categoryName)
    })
    video.getList(talk, function(data) {
        laytpl($('#J_news_tpl').html()).render(data, function(html) {
            $('#J_live').html(html)
        })
        $('#J_live_video').html(data.list[0].videoUrl)
        $("#J_live_text").text(data.list[0].content)
        $('.video-title').eq(1).html(data.list[0].categoryName)
    })
    video.getList(uncle, function(data) {
        laytpl($('#J_news_tpl').html()).render(data, function(html) {
            $('#J_uncle').html(html)
        })
        $('#J_uncle_video').html(data.list[0].videoUrl)
        $("#J_uncle_text").text(data.list[0].content)
        $('.video-title').eq(2).html(data.list[0].categoryName)
    })
    $(document).on('click', '#J_news li,#J_live li,#J_uncle li', function() {
        if (!$(this).hasClass('active-tab')) {
            $(this).addClass('active-tab');
            $(this).siblings('.active-tab').removeClass('active-tab');
        }
        var content = $(this).data('content')
        var url = $(this).data('url')
        $(this).parents('.video-list').siblings('.video-box').find('video').attr('src',url)
        console.log(content, url)
        setVideoUrl($(this),url)
    })

    function setVideoUrl(dom,url){
        if (!dom.hasClass('active-tab')) {
            dom.addClass('active-tab');
            dom.siblings('.active-tab').removeClass('active-tab');
        }
        var content = dom.data('content')
        var id = dom.parents('ul').attr('id');
        $('#'+id+'_video').html(url)
        $('#'+id+'_text').text(content)
    }
    </script>
</body>

</html>